{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<title>社区详情</title>
<style type="text/css">
    .mui-content{padding-bottom: 55px;}
    .mui-grid-view.mui-grid-9:before{height: 1px;}
    .mui-slider-indicator{text-align: left;}
    .bbs-logo{
        height:100%;
    }
</style>
{% endblock %}

{# bodyd代码#}
{% block body %}
<header class="mui-bar bbs-bar" style="background-color: rgba(247, 247, 247, 0); position: absolute;">
    <a href="search?searchName=''" class="mui-icon iconfont icon-sousuo mui-pull-right"></a>
</header>
<div class="mui-content">
    <div class="bbs-top mui-clearfix">
        <img class="mui-pull-left bbs-logo" src="{{ctx.app.config.api.image}}/{{data.icon}}"/>
        <div class="mui-pull-left bbs-items">
            <b class="bbs-name">{{data.name}}</b>
            <p class="bbs-intr"><span>人气 {{data.userCount}} </span><span>帖子 {{data.postCount}} </span></p>
        </div>
        <a class="bbs-attention" href="javascript:;">
            {%if data.collectionId == ''%}
            <i class="iconfont icon-shoucang" data-id="{{data.id}}" onclick="js_yes(this)"></i>
            {%else%}
            <i  style="font-size:24px;" class="iconfont icon-yishoucang" onclick="js_del(this)" data-id="{{data.collectionId}}" data-cid="{{data.collectionId}}"></i>
            {%endif%}
        </a>
    </div>
    <div class="bbs-active-user mui-clearfix">
        <p class="mui-pull-left">活跃用户</p>
        <ul class="mui-pull-right bbs-users">
            {%for item in data.userInfoDTOs%}
            <li><a href="userinfo?id={{item.id}}" data-type="{{item.roleType}}"><img src="{{ctx.app.config.api.image}}/{{item.headImgUrl}}"/></a></li>
            {%endfor%}
        </ul>
    </div>

    <!--最新帖子、热门帖子 毛笔问答-->
    <div id="slider" class="mui-slider mb-count mt-10">
        <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <a class="mui-control-item mb-control-item mui-active" href="#item1mobile">
                最新帖子
            </a>
            <a class="mui-control-item mb-control-item" href="#item2mobile">
                热门帖子
            </a>
            <a class="mui-control-item mb-control-item" href="#item3mobile">
                毛笔问答
            </a>
        </div>
        <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
        <div class="mui-slider-group">
            <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
                <!--最新帖子循环主体开始-->
                {% for item in newpost.list %}
                <div class="mb-post-list-3 xw-border-bottom">
                    <a class="bbs-user-info mui-clearfix" href="userinfo?id={{item.objectId}}">
                        <img class="bbs-user-photo mui-pull-left" src="{{ctx.app.config.api.image}}/{{item.headImgUrl}}"/>
                        <span class="bbs-user-name mui-pull-left">{{item.name}}</span>
                    </a>
                    <a href="postdetail?id={{item.id}}">
                        <h4 class="mui-ellipsis-2">{{item.title}}</h4>
                        <div class="mb-post-imgs">
                            <ul class="mui-clearfix">
                                {% for item2 in item.images%}
                                <li><img src="{{ctx.app.config.api.image}}/{{item2}}"></li>
                                {%endfor%}
                            </ul>
                        </div>
                    </a>
                    <p class="bbs-operaton bbs-operaton1 mui-clearfix">
                        <span class="mui-pull-left"><i class="iconfont icon-zan"></i>{{item.postLikeCount}}</span>
                        <span class="mui-pull-left"><i class="iconfont icon-xiaoxi"></i>{{item.commentCount}}</span>
                        <span class="mui-pull-right">来自逢考必过秘籍社区</span>
                    </p>
                </div>
                {% endfor %}
                <!--最新帖子循环主体结束-->
            </div>
            <div id="item2mobile" class="mui-slider-item mui-control-content">
                <!--热门帖子循环主体开始-->
                {% for item in hotpost.list %}
                <div class="mb-post-list-3 xw-border-bottom">
                    <a class="bbs-user-info mui-clearfix" href="userinfo?id={{item.objectId}}">
                        <img class="bbs-user-photo mui-pull-left" src="{{ctx.app.config.api.image}}/{{item.headImgUrl}}"/>
                        <span class="bbs-user-name mui-pull-left">{{item.name}}</span>
                    </a>
                        {%if item.typeName == 2%}
                        <a href="askquestions?id={{item.id}}">
                        {%else%}
                        <a href="postdetail?id={{item.id}}">
                        {%endif%}
                        <h4 class="mui-ellipsis-2">{{item.title}}</h4>
                        <div class="mb-post-imgs">
                            <ul class="mui-clearfix">
                                {% for item2 in item.images%}
                                <li><img src="{{ctx.app.config.api.image}}/{{item2}}"></li>
                                {%endfor%}
                            </ul>
                        </div>
                    </a>
                    <p class="bbs-operaton bbs-operaton1 mui-clearfix">
                        <span class="mui-pull-left"><i class="iconfont icon-zan"></i>{{item.postLikeCount}}</span>
                        <span class="mui-pull-left"><i class="iconfont icon-xiaoxi"></i>{{item.commentCount}}</span>
                        <span class="mui-pull-right">来自逢考必过秘籍社区</span>
                    </p>
                </div>
                {% endfor %}
                <!--热门帖子循环主体结束-->
            </div>
            <div id="item3mobile" class="mui-slider-item mui-control-content">
                <!--毛笔问答循环主体开始-->
                {%for item in forumpost.list%}
                <div class="mb-post-list-3 xw-border-bottom">
                    <a class="bbs-user-info mui-clearfix" href="userinfo?id={{item.objectId}}">
                        <img class="bbs-user-photo mui-pull-left" src="{{ctx.app.config.api.image}}/{{item.headImgUrl}}"/>
                        <span class="bbs-user-name mui-pull-left">{{item.name}}</span>
                    </a>
                    <a href="askquestions?id={{item.id}}">
                        <h4 class="mui-ellipsis-2">{{item.title}}</h4>
                        <div class="mb-post-imgs">
                            <ul class="mui-clearfix">
                                {% for item2 in item.images%}
                                <li><img src="{{ctx.app.config.api.image}}/{{item2}}"></li>
                                {% endfor %}
                            </ul>
                        </div>
                    </a>
                    <p class="bbs-operaton bbs-operaton1 mui-clearfix">
                        <span class="mui-pull-left">{{item.createDate}}</span>
                        <span class="mui-pull-right">回答{{item.commentCount}}</span>
                    </p>
                </div>
                {%endfor%}
                <!--毛笔问答循环主体结束-->
            </div>
        </div>
    </div>
</div>

<!--发帖子、提问-->
<nav class="mui-bar mui-bar-tab mb-subject-tab">
    <a class="mui-tab-item1 mui-active" href="javascript:window.location.replace('posting?id={{data.id}}')">
        <span class="mui-tab-label">发帖子</span>
    </a>
    <a class="mui-tab-item1" href="javascript:window.location.replace('asking?id={{data.id}}')">
        <span class="mui-tab-label">提问</span>
    </a>
</nav>
{% endblock %}

{#js代码#}
{% block js %}
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
    function js_yes(e){
        var id = $(e).context['dataset']['id'];
        mui.post('/setcollect', {
                type:1,
                domainId:id,
            },function(data){
                if(data.code!=200){
                    // mui.toast(data.message);
                }else{
                    $(e).attr("style","font-size:24px;");
                    $(e).attr("class","iconfont icon-yishoucang");
                    $(e).attr("onclick","js_del(this)");
                    $(e).context['dataset']['cid'] = data.data;
                    // mui.toast('关注成功');
                }
            },'json'
        );
    }

    function js_del(e){
        var id = $(e).context['dataset']['cid'];
        mui.post('/delcollect', {
                collectionIds:id,
            },function(data){
                if(data.code!=200){
                    // mui.toast(data.message);
                }else{
                    $(e).attr("style","font-size:24px;");
                    $(e).attr("class","iconfont icon-shoucang");
                    $(e).attr("onclick","js_yes(this)");
                    // mui.toast('取消关注');
                }
            },'json'
        );
    }
</script>



<!--flotdemo-->
{% endblock %}
